import { Meta, StoryObj } from "@storybook/react/*";
import AutoComplete from "./autoComplete";
import { LakerProps } from "./autoComplete";


const meta:Meta<typeof AutoComplete> = {
    title:'AutoComplete 自动补全',
    component:AutoComplete,
    tags:['autodocs'],
    argTypes:{
        onSelect:{
            description:'点击选项触发的事件',
        },
        onChange:{
            description:'文本框发生改变的时候触发的事件',
        },
    }
}

export default meta

type Story = StoryObj<typeof meta>

const selectOptions = ['aaa','bbb','ccc','abc','ace','ccef']
const handleFetch = (query:string) => {
    return selectOptions.map(item => ({value:item})).filter((item2:LakerProps) => item2.value.includes(query))
}

const handleAsyncFetch = (query:string) => {
    return fetch(`https://api.github.com/search/users?q=${query}`)
    .then(res => res.json())
    .then(({ items }) => {
        return items.slice(0,10).map((item:any) => ({ value:item.login,...item }))
    })
}

export const defaultAutoComplete:Story = {
    args:{},
    render:() => {
        return (
            <AutoComplete 
                fetchSuggestions={handleFetch}
            />
        )
    }
}
defaultAutoComplete.storyName = '默认的AutoComplete'

export const asyncAutoComplete:Story = {
    args:{},
    render:() => {
        return (
            <AutoComplete 
                fetchSuggestions={handleAsyncFetch}
            />
        )
    }
}
asyncAutoComplete.storyName = '支持异步的AutoComplete'

export const templateAutoComplete:Story = {
    args:{},
    render:() => {
        const renderTemplete = (item:any) => {
            return (
                <>
                    <p>name:{item.login}</p>
                    <p>id: {item.id}</p>
                </>
            )
        }
        return (
            <AutoComplete 
                fetchSuggestions={handleAsyncFetch}
                renderOption={renderTemplete}
            />
        )
    }
}
templateAutoComplete.storyName = '支持自定义模板的AutoComplete'